<template>
  <div>
    <el-card class="search-card">
      <BasicTableForm
        ref="formData"
        :formColumns="FORM_ITEM_LIST"
        :dataSource="formData"
        :defaultExpandStatus="false"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
        :colNumOfRow="4"
      />
    </el-card>
    <el-card class="table-card">
      <BasicTable
        :showSelectCol="false"
        :defaultWidth="100"
        :loading="tableInfo.loading"
        :columns="TABLE_COLUMNS"
        :dataSource="tableInfo.list"
        :pagination="pagination"
        :tableHeight="445"
        showActionCol
        :actionColWidth="150"
        :actionRender="renderTableBtnAction"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      />
    </el-card>
  </div>
</template>
<script>
import BasicTableForm from '@/components/supplier/BasicForm';
import BasicTable from '@/components/supplier/BasicTable';
import BasicPage from '@/mixins/supplier/basicPage';
import Dict from '@/mixins/supplier/dict';
import { setAuthBtnId } from '@/utils/bizUtils';
import { getTableAction } from '@supplier/utils/btnsUtils';
import {
  queryAuditListService,
  deleteAuditRecordService
} from '@api/supplier/contract/audit';
import {
  FORM_ITEM_LIST,
  FORM_DATA,
  TABLE_COLUMNS
} from './constants';
import { getWorkflowJumpUrl } from '@/api/supplier/workflow';

export default {
  mixins: [ BasicPage, Dict ],
  components: {
    BasicTableForm,
    BasicTable,
  },
  data () {
    return {
      TABLE_COLUMNS,
      FORM_ITEM_LIST,
      formData: FORM_DATA,
    };
  },
  created () {
    this.getTableData();
  },
  methods: {
    // 表列操作项
    renderTableBtnAction (h, { row }) {
      // 10:'待审批' 20:'审批通过' 30:'审批驳回' 40:'撤回'
      const actionList = [
        { label: '查看', method: this.handleViewDetail, status: [10, 20, 30, 40] },
        { label: '审批流', method: this.handleViewApprovalFlow, hasAuth: true, status: [10, 20, 30] },
        { label: '删除', method: this.handleDelete, hasAuth: true, status: [30, 40] },
      ];
      const filterList = actionList.filter(item => item.status.includes(row.billStatus))
      return getTableAction({ h, row, actionList: filterList, showBtn: this.showBtn });
    },
    // 获取表格数据
    async getTableData () {
      const data = {
        ...this.formData,
        ...this.pagination,
      }
      setAuthBtnId()
      const res = await queryAuditListService(
        data,
        state => { this.tableInfo.loading = state }
      )
      if (res) {
        const { records, total } = res.result;
        this.tableInfo.list = records;
        this.pagination.total = total;
      }
    },
    // 查看审批流
    handleViewApprovalFlow (row) {
      // 动态获取工作流跳转地址
      getWorkflowJumpUrl({ requestId: row.requestId }).then(({ result }) => {
        window.open(result, '_blank')
      })
    },
    // 删除
    async handleDelete (row) {
      const res = await deleteAuditRecordService(
        { id: row.id },
        state => { this.tableInfo.loading = state }
      )
      if (res) {
        this.$message.success('删除成功')
        this.getTableData()
      }
    },
    // 查看详情
    handleViewDetail (row) {
      this.$router.push({ name: 'viewRecordDetail', query: { todoId: row.todoId } })
    }
  }
};
</script>
